<template>
  <zeda-dialog
    v-model="visible"
    title="新增"
    width="600px"
    :before-close="handleClose"
  >
    <aps-form
      :config="apsForm.formConfig"
      :model="apsForm.formData"
      :formRef="apsForm.formRef"
      :labelWidth="apsForm.labelWidth"
      ref="form"
    ></aps-form>
    <form-button
      slot="footer"
      :loading="loading"
      submit-text="提交审核"
      @cancel="handleClose"
      @submit="submit"
    >
    </form-button>
  </zeda-dialog>
</template>

  <script>
import { uploadFile } from "@/api/basicdata/uploadManage";
import FormButton from "@/components/FormButton";

export default {
  dicts: ["sub_application", "show_plate", "document_type"],
  components: { FormButton },
  props: {
    visible: { type: Boolean, default: false },
  },
  data() {
    return {
      loading: false,
      apsForm: {
        formRef: "form",
        formData: {},
        formConfig: {
          formAttr: {
            // inline: true,
            "label-position": "right",
            size: "small",
            bsColumn: {
              col: 1,
              middle: true,
            },
            rules: {
              documentTitle: [
                {
                  required: true,
                  message: "请输入文件标题",
                  trigger: "blur",
                },
              ],
              documentType: [
                {
                  required: true,
                  message: "请选择文献种类",
                  trigger: ["blur", "change"],
                },
              ],
              subApplication: [
                {
                  required: true,
                  message: "请选择子应用",
                  trigger: ["blur", "change"],
                },
              ],
              showPlate: [
                {
                  required: true,
                  message: "请选择显示板块",
                  trigger: ["blur", "change"],
                },
              ],
              fileDesc: [
                {
                  required: true,
                  message: "请输入文件描述",
                  trigger: "blur",
                },
              ],
              file: [
                {
                  required: true,
                  message: "请选择文件",
                  trigger: ["blur", "change"],
                },
              ],
            },
          },
          properties: {
            //这里是渲染查询表单的表头和类型的数据
            documentTitle: {
              typeName: "el-input",
              label: "文件标题",
            },
            documentType: {
              typeName: "el-select",
              label: "文献种类",
              render: (h) => {
                let that = this;
                let arr = [];
                that.dict?.type?.document_type.some((item) => {
                  arr.push(item);
                });
                // 数据严谨处理,处理后端数据异常情况
                let valNum = that.$refs?.form?.getFieldsValue().documentType;
                let a = [
                  h(
                    "el-select",
                    {
                      attrs: {
                        placeholder: "文献种类",
                        value: valNum,
                      },
                      props: ["value"],
                      on: {
                        change: (value) => {
                          that.$refs?.form?.setFieldValue(
                            "documentType",
                            value
                          );
                          that.$forceUpdate();
                        },
                      },
                    },
                    [
                      arr.map((item) => {
                        let { label, value } = item;
                        return h("el-option", {
                          props: {
                            label,
                            value: parseInt(value),
                            key: value,
                          },
                        });
                      }),
                    ]
                  ),
                ];
                return h("div", a);
              },
            },
            subApplication: {
              typeName: "el-select",
              label: "子应用",
              render: (h) => {
                let that = this;
                let arr = [];
                that.dict?.type?.sub_application.some((item) => {
                  arr.push(item);
                });
                // 数据严谨处理,处理后端数据异常情况
                let valNum = that.$refs?.form?.getFieldsValue().subApplication;
                let a = [
                  h(
                    "el-select",
                    {
                      attrs: {
                        placeholder: "子应用",
                        value: valNum,
                      },
                      props: ["value"],
                      on: {
                        change: (value) => {
                          that.$refs?.form?.setFieldValue(
                            "subApplication",
                            value
                          );
                          that.$forceUpdate();
                        },
                      },
                    },
                    [
                      arr.map((item) => {
                        let { label, value } = item;
                        return h("el-option", {
                          props: {
                            label,
                            value: parseInt(value),
                            key: value,
                          },
                        });
                      }),
                    ]
                  ),
                ];
                return h("div", a);
              },
            },
            showPlate: {
              typeName: "el-select",
              label: "显示板块",
              render: (h) => {
                let that = this;
                let arr = [];
                that.dict?.type?.show_plate.some((item) => {
                  arr.push(item);
                });
                // 数据严谨处理,处理后端数据异常情况
                let valNum = that.$refs?.form?.getFieldsValue().showPlate;
                let a = [
                  h(
                    "el-select",
                    {
                      attrs: {
                        placeholder: "显示板块",
                        value: valNum,
                      },
                      props: ["value"],
                      on: {
                        change: (value) => {
                          that.$refs?.form?.setFieldValue("showPlate", value);
                          that.$forceUpdate();
                        },
                      },
                    },
                    [
                      arr.map((item) => {
                        let { label, value } = item;
                        return h("el-option", {
                          props: {
                            label,
                            value: parseInt(value),
                            key: value,
                          },
                        });
                      }),
                    ]
                  ),
                ];
                return h("div", a);
              },
            },
            fileDesc: {
              typeName: "el-input",
              type: "textarea",
              label: "文件内容描述",
            },
            file: {
              typeName: "FileUpload",
              limit: 1,
              fileSize: 20,
              fileType: ["png", "jpg", "jpeg", "gif", "bmp", "pdf"],
              accept: "application/pdf,image/*",
              // fileBigness: "311*140px",
              label: "文件",
            },
          },
        },
      },
    };
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = {
            ...this.$refs.form.getFieldsValue(),
            filePath: this.$refs.form.getFieldsValue().file[0].url,
          };
          this.loading = true;
          uploadFile(data)
            .then((res) => {
              this.loading = false;
              if (res.code === 700) {
                this.$message.warning(res.msg);
                return false;
              }
              this.$message.success("操作成功");
              this.handleClose(true);
            })
            .catch(() => {
              this.loading = false;
              // this.$message.error("系统错误,请联系管理员!300803");
            });
        } else {
          return false;
        }
      });
    },
    handleClose(status) {
      this.$refs["form"].resetFields();
      this.$emit("update:visible", false);
      this.$emit("close", status === true ? status : false);
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-form {
  .el-input,
  .el-cascader,
  .el-input-number,
  .el-select {
    width: 100% !important;
  }
  .map {
    display: flex;
    .el-input {
      margin-right: 10px;
    }
  }
}
</style>
